<template>
	<view>
		<!-- 头部蓝色块 -->
		<view class="ls-div">
			<view class="ls-dm">福州</view>
			<view class="ls-time">
				<view class="ls-time-sz">09:55</view>
				<view class="ls-time-sz">
					<hr class="ls-hr" />
					<view class="ls-fj-ig">
						<image class="lq-img" src="../../static/find/plane.png"></image>
					</view>
				</view>
				<view class="ls-time-sz">15:30</view>
			</view>
			<view class="ls-rqdm">
				<view>8月03日 福州北站</view>
				<view>8月03日 上海虹桥</view>
			</view>
		</view>

		<!-- 步骤条 -->
		<view class="set-1">
			<view class="set-2"></view>
			<view class="set-2"></view>
			<view class="set-2"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	@import url("//at.alicdn.com/t/font_1337773_robb7hmlk9o.css");
	.set-2:last-child::after {
		display: none;
	}

	.set-1 {
		margin: 30upx;
	}

	.set-2 {
		background-color: #c6c6c6;
		height: 300upx;
		border-radius: 10upx;
		width: 600upx;
		margin-left: 100upx;
		margin-top: 60upx;
		position: relative;
	}

	.set-2::after {
		content: '';/* 必须存在如果没有图标就留空 */
		top: 24%;/* 定位 距离*/
		border-left: #c6c6c6 1px solid;/* 横线颜色 */
		left: -82upx;/* 定位 距离*/
		height: 90%;/* 高度 */
		position: absolute;/* 定位 */
	}

	.set-2::before {
		content: "\e619";/* 必须存在如果没有图标就留空 */
		color: #c6c6c6;/* 设置颜色 */
		position: absolute;/* 定位 */
		left: -108upx;/* 移动到左边 */
		font-weight: bold;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		font-family: "iconfont" !important;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		font-size: 54upx;/* 图标大小 */
		font-style: normal;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		-webkit-font-smoothing: antialiased;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		-moz-osx-font-smoothing: grayscale;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	}

	@font-face {
		font-family: "iconfont";
		src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395');
		/* IE9 */
		src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395#iefix') format('embedded-opentype'),
			/* IE6-IE8 */
			url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOIAAsAAAAAB8QAAAM7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqCRIIjATYCJAMUCwwABCAFhG0HZhvNBsiemjwJqJERRCC3tX4YOM4iqNbCnr29uw8wKGBUsUAKqDyCjY5HcEzCALron1wr8wDk8hKBFpIc5yaXfWZJoIBIQkF1KlvVqWuFfZ3c/CBw0p8fcMJJsQY6uIuEMk8188LgXgfHTJceiXlrm0tGajTgaMCz2T6yyf5BXh+Ef9BdxMSIS9cTaKmvYGbzFhRXA1sZ2C0QO7cRAdhadnmkNTSEqufYLM4qNdKx9AJn+M/Hb2OiQVIWwL6rNufIIP1bj29voaZspAiK/byITqLAaEAmdvX6d7KQ+dEstCw2tjQL0FJDkvZald8e//3y+WglCIaW0E/e5R8vERWvuTWY5RYy3/ywXBtKXBEF395EBN++FCQ8V5CWsmEt4CBgHMz1Ad8rde7s2LbD7oUhT3l+eWHbhxwOB+LFrfkVL7I3FIAWdpdWvfHiYt8FltYWdzy1Pz/WfPhQ/elT7efPvUJiVlRsIj8+18X3az7+5Wb48vVrbnvo7OndVe1cPc55k2ebWG7OmMgYX01bT3vJnNlJWtemes0mn3vI/PJl80NQQqVErfcH/Ys5Fy3evrVoyyZNDLSq/cp5EyYsKTbb69bD/+5fmPs/cFwxG9ABoCNdTY+AKrwdi2npHk0Xu4vMH/Q7Wl+4+Yftkv83kMHXTiVutOlsnh68ZYPZit+hmDmRSxVwlDnvxvI8WOq3gz4VCy3xE8Id/d7H2GV2M6Ghi4ak1gcKDYORGTsaSq2Mg0rDTGhplLyTW+mEsRC5BUYadyC0dwpJWw+h0N53ZMb+glJX/6DSPgpoaUN4nLOVobGtZdYuJHAkQ7EbqiVqwMjF7UVrJSKKTmCmitNrETOpUzAiNLxZykMGxPY4wNRBIjnHEDOqh7nOzZBOR6GRUQ2SeKiKc2NiWBju+6JQieqBvbkYRMAhMkjUDVKTUAaYzufsW99fCSEUOgI20rMQr4UwJurloQihwmcg8/SGWT3v8hKTDkQkjsMgjKH0oFzHi+hgnoKM/VtpIBIulGpF1ihRmDcLz9WHnm/Uv0BZNAD40zJSFJGjjEq77dsEg1ahKoF2qbupYvP0KNS2e69WbmucSNZAOpEa5XpUagAAAA==') format('woff2'),
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.woff?t=1565581133395') format('woff'),
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.ttf?t=1565581133395') format('truetype'),
			/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.svg?t=1565581133395#iconfont') format('svg');
		/* iOS 4.1- */
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-yuandian:before {
		content: "\e64d";
	}

	.icon-dingweiweizhi:before {
		content: "\e619";
	}

	/* 头部蓝色 */
	.ls-hr {
		border: 1px dashed #FFFFFF;
		width: 280upx;
	}

	.ls-rqdm {
		display: flex;
		justify-content: space-between;
		margin: 0upx 30upx;
		color: #FFFFFF;
		font-size: 28upx;
	}

	.ls-fj-ig {
		width: 56upx;
		height: 50upx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.ls-fj {
		width: 280upx;
	}

	.ls-time-sz {
		color: #FFFFFF;
		font-size: 50upx;
		position: relative;
	}

	.ls-time {
		display: flex;
		white-space: nowrap;
		margin: 0upx 30upx;
		align-items: center;
		justify-content: space-between;
		margin-top: -10px;
	}

	.ls-dm {
		margin: 30upx;
		color: #FFFFFF;
		font-size: 40upx;
	}

	.ls-div {
		background-color: #5DB9FF;
		height: 300upx;
		overflow: hidden;
	}
</style>
